<template>
    <div class="parent">
        <div class="header">
            <div class="left">
                <div class="company">
                    <text class="title">{{name}}</text>
                    <p class="iconParent">
                        <text class="icon" :style="{ fontFamily: 'wxcIconFont' }" @click="iconEvent">{{'\ue62a'}}</text>
                    </p>
                </div>
                <p class="devision">
                    <text class="devisionName">所属地区: </text>
                    <text class="devisionName">{{devision}}</text>
                </p>
            </div>
            <div class="right">
                <image class="rightImg" :src="portrait"></image>
            </div>
        </div>
        <div class="cont">
            <div class="item-left" @click="toDetail('pwd')">
                <text class="item-icon">{{'\ue6ee'}}</text>
                <text class="item-text">修改密码</text>
            </div>
            <div class="item-left" @click="toDetail('weather')">
                <text class="item-icon item-service">{{'\ue714'}}</text>
                <text class="item-text">天气预报</text>
            </div>
            <div class="btn" @click="signOut">
                <text class="btnText">退出登陆</text>
            </div>
        </div>
    </div>
</template>
<script>
import { getCache, setCache } from '../../util/storageUtils.js'
import { CTCE_DATALIST, CTCE_USER_INFO } from '../../config/storageTypes.js'
import { addIconFontSupport } from '../../config/iconConfig.js'
const modal = weex.requireModule('modal')
const portrait = 'bmlocal://assets/demo.jpg'
const dom = weex.requireModule('dom')
export default {
    name: 'account',
    data () {
        return {
            portrait: portrait,
            devision: '',
            name: ''
        }
    },
    beforeCreate () {
        addIconFontSupport(dom, "../../")
    },
    created () {
        getCache(CTCE_DATALIST).then(res => {
            const data = JSON.parse(res)
            // modal.alert({
            //     message: res
            // })
            data.map(item => {
                if (item.DISPMKXZ == '02') {
                    this.datalist.push(item)
                }
            })
        })
        getCache(CTCE_USER_INFO).then(res => {
            const data = JSON.parse(res)
            this.devision = data.xzqhmc
            this.name = data.ryxm
        })
    },
    methods: {
        toDetail (value) {
            // switch (value) {
            //     case 'weather':
            //         this.$router.toWebView({
            //             url:'bmlocal://assets/weather.html',
            //             title: '天气预报',
            //             navShow: true
            //         })
            //     break;
            //     case 'pwd':
            //         this.$router.open({
            //             name: 'pwd'
            //         })
            //     break
            // }
            this.$router.open({
                name: value
            })
        },
        signOut () {
            this.$router.open({
                name: 'login'
            })
        },
        iconEvent () {
            this.$notice.alert({message: '修改名称'})
        }
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
}
.header {
    width: 750px;
    height: 200px;
    padding: 20px 40px;
    background-color: rgba(74,182,128,1);
    flex-direction: row;
}
.cont {
    width: 750px;
    flex: 1;
    background-color: #eee;
}
.left{
    width: 500px;
    height: 160px;
    justify-content: center;
    align-items: flex-start;
}
.right{
    width: 170px;
    height: 160px;
    justify-content: center;
    align-items: center;
}
.rightImg {
    width: 104px;
    height: 104px;
    border-radius: 104%;
    border-color: rgba(255,255,255,1);
    border-style: solid;
    border-width: 2px;
}
.title {
    font-size:40px;
    font-family:PingFang-SC-Medium;
    color:rgba(255,255,255,1);
}
.devision {
    flex-direction: row;
    margin-top: 10px;
}
.devisionName {
    font-size:28px;
    font-family:PingFang-SC-Regular;
    color:rgba(255,255,255,1);
}
.company{
    flex-direction: row;
}
.iconParent{
    width: 100px;
    height: 40px;
}
.icon{
    font-size: 24px;
    font-family:PingFang-SC-Regular;
    color:rgba(255,255,255,1);
    margin-top: 15px;
    margin-left: 15px;
}
.item-left {
    width: 750px;
    height: 130px;
    background-color: #fff;
    margin-top: 20px;
    padding: 0 40px;
    flex-direction: row;
    align-items: center;
  }
  .item-icon {
    font-family: wxcIconFont;
    font-size: 44px;
    width:82px;
    height:82px;
    border-radius: 82%;
    text-align: center;
    line-height: 82px;
    background-color:rgba(248,174,200,1);
    color: #fff;
  }
  .item-text {
    margin-left: 20px;
    font-size:32px;
    font-family:PingFangSC-Regular;
    color:rgba(74,74,74,1);
  }
  .item-service {
      background-color: rgba(62,175,252,1);
  }
  .btn{
      width: 750px;
      height: 100px;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      margin-top: 40px;
  }
  .btnText{
      font-size:32px;
      font-family:PingFangSC-Regular;
      color:rgba(252,81,137,1);
  }
</style>
